import React, { useContext,useEffect} from 'react';
import Count from './components/count';
import storeContext from './context/shop';
import {observer} from 'mobx-react-lite';


// @inject('shop')
// @observer
// class App extends Component {

    
//     componentDidMount() {
//         //获取购物车的数据
//         this.props.shop.getShopList();
//     }
    
//     render() {
//         let {shoplist,total} = this.props.shop;
//         return (
//             <div>
//                 {
//                     shoplist.map((item,index) => <div key={index}>
//                         <h4>{item.title}</h4>
//                         <span>{item.price}</span>---
//                         <span>{item.count}</span>
//                         <Count count={item.count} index={index}></Count>
//                     </div>)
//                 }

//                 <div>总价{total}</div>
//             </div>
//         )
//     }
// }

// export default App



function App(){
    let {shop} = useContext(storeContext);

    useEffect(() => {
        shop.getShopList();
    },[])
    return (
        <div>
            {
                shop.shoplist.map((item,index) => <div key={index}>
                    <h4>{item.title}</h4>
                    <span>{item.price}</span>---
                    <span>{item.count}</span>
                    <Count count={item.count} index={index}></Count>
                </div>)
            }

            <div>总价{shop.total}</div>
        </div>
    )
}

export default observer(App)